import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';
import 'package:cached_network_image/cached_network_image.dart';

///讲述图片控件的使用
///1.
class ImageWidgetPage extends StatelessWidget {
  // 声明文本样式
  final _textStyle = const TextStyle(
    fontFamily: 'OpenSans',
    fontSize: 28,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Text(
              '1.Image.network:网络上加载图片',
              style: _textStyle,
            ),
            Container(
              width: 100,
              alignment: Alignment.center,
              child: Image.network(
                'https://images.unsplash.com/photo-1559139011-009c239b7142?ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80',
                fit: BoxFit.fitWidth,
              ),
            ),
            Text(
              '2.FadeInImage可以设置placeholder',
              style: _textStyle,
            ),
            FadeInImage.memoryNetwork(
              placeholder: kTransparentImage,
              image:
                  'https://images.unsplash.com/photo-1559139011-009c239b7142?ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80',
              width: 200,
              fit: BoxFit.fitWidth,
            ),
            Text(
              '3.cached_network_image配置图片缓存',
              style: _textStyle,
            ),
            CachedNetworkImage(
              imageUrl: "http://via.placeholder.com/350x150",
              placeholder: (context, url) => new CircularProgressIndicator(),
              errorWidget: (context, url, error) => new Icon(Icons.error),
            ),
            Text(
              '4.Image.asset:本地加载图片',
              style: _textStyle,
            ),
            Image.asset('assets/images/CustomScrollViewImage.jpg'),
            Text(
              '5.Image.file(File(\'完整路径\'))绝对路径加载本地图片',
              style: _textStyle,
            ),
            Text(
              '6.使用path_provider可以通过相对路径加载本地图片',
              style: _textStyle,
            ),
            Text(
              '7.Icon(Icons.xxx)来使用内置的图标',
              style: _textStyle,
            ),
            Icon(Icons.android,size: 100,),
          ],
        ),
      ),
    );
  }
}
